<template>
    <div class="invite-order"
        :style="style.items">
        <div class="title fcb"
            :style="style.title">
            <span v-text="Lang.changeemail[lang][0]"></span>
            <!-- <hb-button2 txt="查看完整榜单" @clk="e_complete('h50')" /> -->
        </div>
        <div class="body bb"
            :style="style.body">
            <ul class="ul"
                :class="showHowMuch">
                <li class="li fcb bb"
                    v-for="(v, i) in inviteList"
                    :key="i">
                    <span class="order"
                        v-html="iHandler(i)" />
                    <span v-text="pHandlder(v.conn)"> </span>
                    <span class="count"
                        v-text="v.count">2
                    </span>
                </li>
                <li class="t-c">
                    <hb-button2 txt="收起"
                        @clk="e_complete('h3')" />
                </li>

            </ul>
        </div>
    </div>
</template>

<script>
import style from '../../style.jsx'
import img0 from './img/1.svg'
import img1 from './img/2.svg'
import Lang from './lang.js'
import img2 from './img/3.svg'
import {phoneHandle, emailHandle} from '@d/qsoft'
import {vpost, kpost, vlink} from '@api'

let iHandler = n => {
	let re = ''
	let box = [img0, img1, img2]
	if (n < 3) {
		let img = box[n]
		re = `<img src="${img}">`
	} else {
		re = n + 1
	}
	return re
}

let pHandlder = s => {
	s = String(s)
	if (s.match(/^\d{11}$/)) {
		s = phoneHandle(s)
	} else if (s.match(/^\S+@\S+\./)) {
		s = emailHandle(s)
	} else {
		s = '******'
	}
	return s
}

export default {
	data() {
		return {

			Lang,
			style,
			iHandler,
			pHandlder,
			showHowMuch: 'h3',
			inviteList: [
				{
					conn: 'qqq666@126.com',
					count: 20,
				},
				{
					conn: '18810575232',
					count: 17,
				},
				{conn: 'yzsfwew@qq.com', count: 15},
			],
		}
	},
	created() {},
	methods: {
		e_complete(s) {
			this.showHowMuch = s
		},
		init(){
			vpost(vlink.user.getPai).then(re => {
			if (re.status === '1') {
				this.inviteList = re.data.list
			}
		})
		}
	},
	mounted(){
		this.init();
	},
	computed: {
		lang() {
			return this.$store.state.setting.lang
		},
	},
}
</script>

<style scoped>
.invite-order {
	background-color: #181b2a;
}
.body {
	padding: 40px 0;
}
.ul {
	overflow: hidden;
	transition: max-height 2.5s linear;
}
.h3 {
	max-height: 234px;
}
.h50 {
	max-height: 4000px;
}
.li {
	margin: 2px 0;
	height: 76px;
	padding: 0 20px;
	background-color: rgb(27, 30, 46);
	color: var(--clr0);
}
.order {
	width: 30px;
	text-align: center;
}
.count::before {
	content: 'number';
	padding-right: 10px;
}
</style>